<template>
	<view class="index-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="false" color="#fff" :title="title"></uni-navbar></view>
		<view class="logo-box">
			<view class="logo-ttl">
				<view class="h1" :style="{ 'margin-top': statusBarHeight }">{{ title }}</view>
				<!-- <view class="search-view" @click="goTo('/pages/condi/list')"><image class="image" src="/static/img/filter.png" mode="scaleToFill"></image></view> -->
				<!-- <view class="banner"><u-swiper :list="swiperList" mode="none" height="280" @click="swiperClick"></u-swiper></view> -->
				<view class="banner"><image class="image" src="/static/img/banner_01.png" mode="scaleToFill"></image></view>
			</view>
		</view>

		<!-- <u-notice-bar class="notice-bar" mode="vertical" :list="list"></u-notice-bar> -->

		<view class="code-box">
			<view class="code-item" v-if="$sysMenus('perform')" @click="perform()">
				<image class="image" src="/static/img/nav_02.jpg" mode="scaleToFill"></image>
				<!-- 履职管理 -->
			</view>
			<view class="code-item" @click="goTo('/pages/clue/list')">
				<image class="image" src="/static/img/nav_04.jpg" mode="scaleToFill"></image>
				<!-- 查看代表 -->
			</view>
			<view class="code-item" @click="goTo('/pages/condi/list')">
				<image class="image" src="/static/img/nav_03.jpg" mode="scaleToFill"></image>
				<!-- 建议列表 -->
			</view>
			<view class="code-item" @click="goTo('/pages/condi/add')">
				<image class="image" src="/static/img/nav_01.jpg" mode="scaleToFill"></image>
				<!-- 提交建议 -->
			</view>
		</view>

		<!-- <view class="container">
			<u-tabs class="tab-box" :list="tabsList" :is-scroll="false" :current="tabsCurrent" @change="tabsChange"></u-tabs>

			<view class="list-box">
				<view class="list-info_02" v-for="(item, index) of willList" :key="item.id" @click="goTo(item)">
					<view class="left">
						<view class="info-title">{{ item.questionTitle }}</view>
						<view class="info-btm">
							<text class="left-name">{{ item.submitName }}</text>
							<text class="line"></text>
							<text class="left-time">{{ item.createTimeStr }}</text>
						</view>
					</view>
					<view class="right" :style="'color:' + colorMap[item.nodeStatus]">{{ tabsList[item.nodeStatus].name }}</view>
				</view>

				<u-loadmore :status="loading" />
			</view>
		</view> -->
		<view class="container" v-if="$sysMenus('tzgg_top')">
			<view class="h2-row">
				<view class="h2-title">通知公告</view>
				<navigator hover-class="none" class="h2-col" url="/pagesB/notice/list">查看更多</navigator>
			</view>

			<view class="list-box" :style="{ background: Notice.loading == 'nodata' ? 'none' : '#fff' }">
				<view class="list-info_01" v-for="(item, index) of Notice.list" :key="item.id" @click="goTo('/pagesB/notice/detail?id=' + item.id)">
					<view class="info-title">{{ item.title }}</view>
					<view class="info-btm">
						<view class="btm-left clamp">
							<text class="left-name">{{ item.userName }}</text>
							<text class="left-time">{{ $parseTime(item.createTime, '{y}-{m}-{d}') }}</text>
						</view>
					</view>
				</view>
				<u-loadmore :status="Notice.loading" />
			</view>
		</view>

		<u-back-top :scroll-top="scrollTop" top="200"></u-back-top>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			scrollTop: 0,
			statusBarHeight: '0',
			title: '奎文区人大代表掌上履职通',
			swiperList: [],
			swiperImage: '/static/img/bg_03.png',
			tabsCurrent: 0,
			tabsList: [
				{
					name: '所有',
					value: 0
				},
				{
					name: '待审核',
					value: 1
				},
				{
					name: '办理中',
					value: 2
				},
				{
					name: '待办结',
					value: 3
				},
				{
					name: '已办结',
					value: 4
				}
			],
			colorMap: {
				0: '#0099ff',
				1: '#ff9900',
				2: '#19be6b',
				3: '#00ff00',
				4: '#00ffff',
				5: '#F5A623'
			},
			willList: [],
			will: {
				clientCode: '',
				userId: '',
				nodeStatus: '',
				questionTitle: ''
			},
			loading: 'loadmore',
			Notice: {
				tabsList: [
					{
						name: '未读',
						value: 0
					},
					{
						name: '已读',
						value: 1
					}
				],
				colorMap: {
					0: '#0099ff',
					1: '#ff9900',
					2: '#19be6b'
				},
				list: [],
				pageNum: 1,
				pageSize: 10,
				readType: '',
				announcements: {
					dataType: '1',
					title: ''
				},
				loaded: false,
				loading: 'loadmore'
			}
		};
	},
	onLoad() {
		this.loadLogin();
		this.loadData();
		this.getBaiduToken();

		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'rpx';
		console.log(this.statusBarHeight);
	},
	onShow() {
		this.loadLogin();
		this.loadNotice('refresh');
	},
	onPullDownRefresh() {
		this.loadNotice('refresh');
	},
	onShareAppMessage(res) {
		return {
			title: this.title,
			path: '/pages/index/index'
		};
	},
	onShareTimeline(res) {
		return {};
	},
	onReachBottom() {
		if (this.Notice.loading == 'loadmore') this.loadNotice('refresh');
	},
	onPageScroll(res) {
		this.scrollTop = res.scrollTop;
	},
	computed: {
		...mapState(['userInfo', 'sysUser'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.roleCodes = this.userInfo.roleCodes.join(',');
				this.userId = this.userInfo.sysUser.id;
				this.will.userId = this.userInfo.sysUser.id;
				this.will.clientCode = this.userInfo.sysUser.clientCode;
				this.title = `奎文区人大代表掌上履职通`;

				this.pageNum = 1;
				this.pageSize = 10;

				uni.setNavigationBarTitle({
					title: this.title
				});

				if (this.roleCodes == 'qunzhong') {
					this.$logout();
				}
			} else {
				// this.clientCode = '370705';
				this.$logout();
			}
		},
		loadData(type = 'add') {
			if (type == 'add' && this.loading == 'loading') {
				return false;
			}
			if (type == 'add' && this.loading == 'nomore') {
				return false;
			}

			this.loading = 'loading';
			if (type != 'add') {
				this.pageNum = 1;
			}
			let data = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				userId: this.userId,
				clientCode: this.clientCode,
				role: this.roleCodes,
				param: this.will
			};

			let url = '/lvzhitong/questions/getList';

			this.$request(url, data).then((res) => {
				let count = 0;
				if (type != 'add') {
					uni.stopPullDownRefresh();
					this.willList = [];
				}

				this.loading = this.pageNum < Math.ceil(res.data.total / this.pageSize) ? 'loadmore' : 'nomore';
				this.pageNum = this.pageNum + 1;
				this.willList = this.willList.concat(res.data.records);
				if (this.willList.length <= 0) {
					this.loading = 'nodata';
				}
			});
		},
		loadNotice(type = 'add') {
			if (type == 'add') {
				if (this.Notice.loading == 'nomore') {
					return false;
				}
				this.Notice.loading = 'loading';
			} else {
				this.Notice.loading = 'loading';
			}
			if (type != 'add') {
				this.Notice.pageNum = 1;
			}
			let data = {
				pageNum: this.Notice.pageNum,
				pageSize: this.Notice.pageSize,
				currentUserId: this.userId,
				roleCodes: this.roleCodes,
				clientCode: this.clientCode,
				readType: this.Notice.readType,
				announcements: this.Notice.announcements
			};
			this.$request('/announcements/myList', data).then((res) => {
				let count = 0;
				if (type != 'add') {
					uni.stopPullDownRefresh();
					this.Notice.list = [];
				}

				this.Notice.loading = this.Notice.pageNum < Math.ceil(res.data.total / this.Notice.pageSize) ? 'loadmore' : 'nomore';
				this.Notice.pageNum = this.Notice.pageNum + 1;
				this.Notice.list = this.Notice.list.concat(res.data.records);
				this.Notice.loaded = true;
				if (this.Notice.list.length <= 0) {
					this.Notice.loading = 'nodata';
				}
			});
		},
		getBanner() {
			this.$request('/banner/list', {
				clientCode: this.clientCode,
				userId: this.userId,
				banner: {
					enable: '1'
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this.swiperList = [];
				res.data.records.forEach((item) => {
					if (item.fileList && item.fileList.length > 0) {
						this.swiperImage = this.$imagePreview(item.fileList[0].path);
						this.swiperList.push({
							id: item.id,
							title: item.title,
							url: item.externalLink,
							image: this.$imagePreview(item.fileList[0].path)
						});
					}
				});
			});
		},
		getBaiduToken() {
			this.$request('/baidu/ttsToken', {
				clientCode: this.clientCode,
				userId: this.userId
			}).then((res) => {
				uni.setStorageSync('baiduToken', res.data);
			});
		},
		tabsChange(index) {
			this.tabsCurrent = index;
			this.will.nodeStatus = this.tabsList[index].value;
			this.loadData('refresh');
		},
		scan() {
			uni.scanCode({
				onlyFromCamera: true,
				success: (res) => {
					this.$qrcodeResult(res);
				}
			});
		},
		perform() {
			if (this.$sysMenus('perform_eval_group')) {
				uni.navigateTo({
					url: '/pagesA/duties/index'
				});
			} else {
				uni.navigateTo({
					url: '/pagesA/duties/self'
				});
				return false;
				//判断是否活动组
				if (this.$roleCodes('xiaozuguanliyuan')) {
					let wyhdz = this.userInfo.userInfo.wyhdz;
					if (wyhdz == null || wyhdz == '') {
						wyhdz = this.userInfo.userInfo.remark4;
					}
					uni.navigateTo({
						url: '/pagesA/duties/group?wyhdz=' + wyhdz
					});
				} else {
					uni.navigateTo({
						url: '/pagesA/duties/self'
					});
				}
			}
		},
		goTo(url) {
			if (this.userInfo.sysUser) {
				uni.navigateTo({
					url: url
				});
			} else {
				this.$store.commit('logout');
				uni.showModal({
					title: '提示',
					content: '请先登录？',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss">
.logo-box {
	// text-align: center;
	// padding-bottom: 40rpx;
	background: linear-gradient(93deg, #df3b37 0%, #c62727 100%);

	.logo-ttl {
		padding: 50rpx 30rpx 20rpx;
		// height: 500rpx;
	}

	.h1 {
		margin-bottom: 30rpx;
		font-size: 18px;
		font-weight: 600;
		color: #fff;
		line-height: 64rpx;
	}
}

.code-box {
	padding: 10rpx 30rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background: #f6f7fb;

	.code-item {
		position: relative;
		z-index: 1;
		margin: 10rpx 0;
		width: 336rpx;

		.image {
			width: 100%;
			height: 140rpx;
		}
	}
}

.banner {
	position: relative;
	padding: 0;
	min-height: 360rpx;
	z-index: 10;

	.image {
		height: 360rpx;
	}
}

.search-view {
	margin-bottom: 20rpx;
	padding: 0;
	border: 0;

	.image {
		height: 68rpx;
	}
}

.container {
	background-color: #fff;
}

.h2-row {
	border: 0;
}
</style>
